<template>
  <div>
    <div class="shop">
      <div class="shop-info">
        <img src="../../assets/1.jpg" alt="" />
        <div>
          <p>李东东的店铺</p>
          <p>销量：12202</p>
        </div>
        <a href="">+关注</a>
      </div>
      <div class="shop-info-more">
        <a href="##"><i></i>搜索</a>
        <a href="#"><i></i>客服</a>
        <!-- <a href="#"><i></i>全部商品</a> -->
      </div>
      <div class="shop-goods"v-for="(item,index) in DataList">
        <!--<a href="详情页面.html">-->
        <div @click="plec(index)">
            <img :src="imgTitl+item.thumbnail" alt="" />
          <div class="shop-goods-info">
            <p>{{item.goods_title}}</p>
            <p>价格：￥{{item.market_price}}</p>
            <p>会员价：<em>￥<i>{{item.price}}</i></em></p>
          </div>
        </div>
      </div>
      <br>
      <div style="display: block;">
        <p class="el-icon-loading"style="font-size: 24px;text-align: center;width: 100%;"v-show="loading"></p>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import qs from 'qs'
  export default {
    name: 'Shop',
    data(){
      return{
        imgTitl:'http://39.96.76.3/HuiWanZhong/public/uploads/',
        DataList:[],

        fullscreenLoading: false,

        tableData: [],
        loading: false,
        onScroll:'',
        page:'1',
        total:'',

      }
    },
    created() {
      axios.post('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getShopInfo', qs.stringify({
        'merchantId': '2',
        'page':'1',
      })).then(re => {
        console.log(re);
        this.DataList = re.data.message.goodList.data;
        this.total = re.data.message.goodList.total;
        console.log(this.total)
      });
    },
    mounted(){
      $(window).bind("scroll", this.Paging);
    },
    methods:{
      plec(index){
        // console.log(this.DataList[index].id)
        this.$router.push({name: 'AssembleDetails', params: {id:this.DataList[index].id}});
      },

      Paging: function () {
        var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
        var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
        var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        if (pageHeight - viewportHeight - scrollHeight < 10) {
          this.loading = false;
          this.page = Number(this.page)+Number(1);
          let DataList2 = this.DataList;
          let page2 = this.page;
          let loading2 = this.loading;
          let total2 = this.total;
          setTimeout(function () {
            axios.post('http://39.96.76.3/HuiWanZhong/public/index.php/team/index/getShopInfo',qs.stringify({merchantId:'2',page:page2})).then(re=>{
              for (var i=0; i<re.data.message.goodList.data.length; i++)
              {
                DataList2.push(re.data.message.goodList.data[i]);
                if (Number(total2) == Number(total2)){
                  loading2 = false;
                  console.log(total2)
                }
              };
            });
          },1000)
        }
      }
    },
    watch:{
    }
  }
</script>

<style scoped>
  /*查看店铺*/
  .shop{
    width:94%;
    display: inline-block;
    margin-left:3%;
  }
  .shop-goods{
    width:47%;
    float: left;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    margin-top:10px;
    padding-bottom: 10px;
  }
  .shop-goods img{
    width:100%;
    height:173px;
  }
  .shop-goods-info p:nth-child(1){
    width: 94%;
    margin: 0 auto;
    font-size: 13px;
    padding: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4px;
  }
  .shop-goods-info p:nth-child(2){
    width: 94%;
    margin: 0 auto;
    font-size:12px;
    color:#999;
  }
  .shop-goods-info p:nth-child(3){
    font-size:12px;
    color:#999;
    width: 94%;
    margin: 0 auto;
  }
  .shop-goods-info p:nth-child(3) em{
    color:#FC2847;
  }
  .shop-goods-info p:nth-child(3) em i{
    color:#FC2847;
    font-size:16px;
  }
  /*.shop-goods-info p:nth-child(3) em{
      color:#999;
      font-size:12px;
      float: right;
  }*/
  .shop .shop-goods:nth-child(odd){
    margin-right: 6%;
  }
  .shop-info a{
    width: 66px;
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(254, 39, 70, 1);
    color:#FFF;
    text-align: center;
    display: inline-block;
    float: right;
    margin-top:15px;
  }
  .shop-info {
    margin-top:10px;
    margin-bottom: 10px;
  }
  .shop-info img{
    width:54px;
    height:54px;
    border-radius: 5px;
    float: left;
  }
  .shop-info div{
    margin-left: 2%;
    width:50%;
    display: inline-block;
  }
  .shop-info div p:nth-child(1){
    font-weight: 600;
    margin-top:5px;
  }
  .shop-info div p:nth-child(2){
    color:#999;
    font-size:12px;
    margin-top:10px;
  }
  .shop-info-more{
    display: inline-block;
    width:100%;
    margin-top:10px;
  }
  .shop-info-more a:nth-child(1),.shop-info-more a:nth-child(2){
    width: 66px;
    height: 25px;
    line-height: 25px;
    border-radius: 20px;
    background-color: rgba(223, 223, 223, 1);
    display: inline-block;
    float: left;
    text-align: center;
    color:#999;
    margin-right: 15px;
  }
  .shop-info-more a:nth-child(1) i{
    display: block;
    height: 19px;
    width: 17px;
    overflow: hidden;
    background: url(../../assets/kefu.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    margin-left: 5px;
    float: left;
    vertical-align: middle;
  }
  .shop-info-more a:nth-child(2) i{
    display: block;
    height: 19px;
    width: 17px;
    overflow: hidden;
    background: url(../../assets/kefu.png) no-repeat;
    background-size: 100%;
    margin-top: 5px;
    margin-left: 5px;
    float: left;
    vertical-align: middle;
  }
  .shop-info-more a:nth-child(3){
    color:#FC2847;
    font-weight: 600;
    float: right;
  }
  .shop-info-more a:nth-child(3) i{
    display: block;
    height: 19px;
    width: 17px;
    overflow: hidden;
    background: url(../../assets/lihe.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: left;
    vertical-align: middle;
    margin-top: 2px;
  }
</style>
